<template>
  <el-dialog title="分配部门" :visible.sync="showChange" width="400px"
             @close="$emit('update:showChangeMember', false)" :close-on-click-modal="false">
    <el-radio-group v-model="gId">
      <el-row>
        <el-col :span="12" v-for="role in rolesInfo" :key="role.id">
          <el-radio :label="role.id">{{role.name}}</el-radio>
        </el-col>
      </el-row>
    </el-radio-group>
    <p slot="footer" class="dialog-footer mt20">
      <el-button @click="showChange = false">取 消</el-button>
      <el-button type="primary" @click="updateMemberRoles">确 定</el-button>
    </p>
  </el-dialog>
</template>

<script>
  export default {
    name: "ChangeMemberDepartment",
    props: {
      showChangeMember: {
        type: Boolean,
        default: false
      },
      memberInfo: {
        default: () =>{
          return {
            id:null,
            gId:null
          }
        }
      },
      rolesInfo: {
        default:() =>{
          return []
        }
      }
    },
    data() {
      return {
        showChange: this.showChangeMember,
        gId:null
      }
    },
    watch: {
      showChangeMember(val) {
        this.showChange = val
      },
      memberInfo(val){
        this.gId = val.gId
        console.log(val)
      }
    },
    methods: {
      updateMemberRoles() {
        if(this.gId === null){
          this.$message({
            message: "请选择部门",
            type: 'error'
          });
        }else{
          ajax.post(apis.auth.updateMemberDepartment, {id: this.memberInfo.id,gId: this.gId})
            .then(res => {
              if (res.success === true) {
                this.$message({
                  message: res.message,
                  type: 'success'
                });
                this.showChange = false
                this.$emit("refreshList")
              }else{
                this.$message({
                  message: res.message,
                  type: 'error'
                });
              }
            })
        }

      }
    },
    created() {
    }
  }
</script>

<style lang="scss" scoped>
  .el-col{
    width: 50%;
    padding: 5px;
  }
</style>
